<template>
    <div >
        <el-form :model="form" label-width="120px">
            <el-form-item label="职级名称" >
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="审核次序">
                <el-input v-model="form.seq" size="small" />(数据越大，审核越靠后)
            </el-form-item>
            <el-form-item label="审核人员">
                <el-transfer v-model="form.person" :data="tqrs" :titles="['待选人员列表','已选人员列表']" />
            </el-form-item>
            <el-row>
                <el-button type="primary" icon="el-icon-check" @click="saveData" size="medium" style="margin-left:120px;">保 存</el-button>
            </el-row>
        </el-form>
    </div>
</template>
<script lang="ts">
import { queryUsersByOrganId } from '/@/api/user/index';
import { ElMessageBox } from 'element-plus';   
import { defineComponent , reactive, toRefs } from 'vue'
export default defineComponent({
    props: ['organid'],
    setup(props,context) {
        let state = reactive({
            form: {
                    name:"",
                    seq:0,
                    person:[],
                    nlst:[]
                },
            isNew: false,
            tqrs:[]
        });
        //父级组件刷新数据
        function initData(row:any,isNew:boolean){
            if(isNew){
                state.isNew = true;
                state.form = {
                    name:"",
                    seq:0,
                    person:[],
                    nlst:[]
                }
            }else{
                state.isNew = false;
                state.form = row;
            }
		};
        function saveData(){
            if(state.form.name.length == 0){
                ElMessageBox({ message: '请输入职级名称！！', type: 'error' });
                return;
            }
            if(state.form.seq == 0){
                ElMessageBox({ message: '请填写审核次序!', type: 'error' });
                return;
            }
            if(state.form.person.length == 0){
                ElMessageBox({ message: '请选择审核人!', type: 'error' });
                return;
            }
            state.form.nlst = [];
            for(var i = 0; i < state.form.person.length; i++){
                var p1 = state.form.person[i];
                var first = state.tqrs.filter(v=>{ return v.key == p1} );
                state.form.nlst.push(first[0].label);
            }
            context.emit('refresh',state.form,state.isNew);
        }
        queryUsersByOrganId({orgid:props.organid}).then(res=>{
            state.tqrs = res.data.data.map((x: any) => {
				return {
					label: x.name,
					value: x.name,
					key:x.id
				};
			});
        });
        return{
            initData,
            saveData,
            ...toRefs(state)
        }
    },
})
</script>
